body {
    margin: 0 !important;
    background-color: #72767b0d;
}

.el-upload.el-upload--picture-card {
    width: 330px !important;
    height: 430px !important;
}

.upload-container-css {
    display: flex;
    align-items: flex-start;
}

.upload-section {
    margin-right: 5px; /* 右侧与上传组件的间距 */
}

.small-image {
    display: flex; /* 图片列表使用Flexbox布局 */
    flex-direction: column; /* 垂直排列 */
}

.template-class-position-display {
    width: 320px;
    height: 420px;
    margin: 5px;
    display: block;
}
.template1-children-display {
    height: 130px;
    background-color: #72767b1a;
    border: 1px #72767b69 solid;
    margin-top: 5px;
    position: relative;
    overflow: hidden;
}

.zoomable-image {
    cursor: pointer; /* 鼠标指针样式为手型，表示可点击 */
    transition: height 0.3s ease; /* 添加过渡效果，使大小变化更平滑 */
}


.template1.selected {
    border: 4px #FFD700 solid !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.template2.selected {
    border: 4px #FFD700 solid !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

/*.small-image {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(5, 1fr);*/
/*    grid-gap: 10px;*/
/*    align-items: baseline;*/
/*    justify-items: end;*/
/*}*/

.small-image ul.small {
    list-style: none;
    display: contents;
}

.add-resource {
    font-size: 20px;
    color: red !important;
}

.add-image {
    font-size: 20px;
    color: red !important;
    font-weight: 500;
}

.add-image-source {
    display: grid;
}

.icon-style-class {
    font-size: 80px;
}


.print-option {
    padding: 10px;
    display: flex;
    background-color: white;
    justify-content: center;
}

.display-large-img {
    width: 500px;
    height: 500px;
}

.dialog-class-style {
    display: flex;
}

button.el-button.keep-trying-upload {
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.34);
    width: 150px;
    margin-right: 40px;
}

.el-upload--picture-card {
    --el-upload-picture-card-size: 370px;
    height: 400px;
}

.template-class-position {
    height: 90px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    margin-top: 20px;
    display: flex;
    gap: 20px;
    padding: 10px;
}

.template1 {
    margin-left: 36px;
    width: 60px;
    background-color: white;
}

.template1-children {
    background-color: #72767b69;
    width: 50px;
    height: 20px;
    margin: 5px;
    border: 1px silver solid;
}

.template2 {
    /*flex: 1;*/
    width: 60px;
    background-color: white;
}

.template2-children {
    width: 50px;
    height: 45px;
    margin: 5px 5px 0 5px;
    border: 1px silver solid;
    background-color: #72767b69;
}
.template2-grid {
    display: flex;
}

.template2-children-grip {
    margin: 5px;
    width: 20px;
    height: 20px;
    background-color: #72767b69;
}

.template3 {
    margin-right: 36px;
    flex: 1;
}

.container-print {
    background-color: #72767b0d;
}

button.el-button.right-now-print {
    width: 150px;
}

.add-icon-class {
    color: black !important;
    margin-right: 2px;
    text-align: center;
}

.el-button > span {
    align-items: center;
    display: flex;
    line-height: initial;
}

.image-container {
    position: relative;
    display: inline-block;
}

.close-icon {
    position: absolute !important;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 10;
    border: 1px solid;
}

.zoomable-image {
    max-width: 100%;
    cursor: pointer; /* 鼠标指针样式为手型，表示可点击 */
    transition: height 0.3s ease; /* 添加过渡效果，使大小变化更平滑 */
}

.zoom-container {
    position: relative;
    /*width: 295px;*/
    /*height: 200px;*/
    width: 100%; /* 可根据需要调整 */
    height: 100%; /* 可根据需要调整 */
    overflow: hidden;
}


.zoomable-image {
    width: 100%; /* 图片宽度占满容器 */
    height: auto; /* 根据宽度自动调整高度 */
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 0.3s ease; /* 可选：添加过渡效果 */
}

@media screen {
    .display-large-img {
        width: auto;
    }

    .dialog-class-style {
        display: flex;
    }

    .el-upload--picture-card {
        --el-upload-picture-card-size: 370px;
    }
}